<template>
  <div class="app-container">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="会员销售统计" name="first">
        <el-row :gutter="20" v-for="(item,index) in memberSalese" :key="index">
          <el-col :span="4">
            <div class="grid-content bg-purple">
              <p class="title">上月会员购买(元)</p>
              <p class="price">{{item.memberLastMonthSales}}</p>
              <p class="other">昨日销售 ￥{{item.memberYesterdaySales}}</p>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-purple">
              <p class="title">会员购买累积（元）</p>
              <p class="price">{{item.memberTotalSales}}</p>
              <p class="other">去年累积 ￥{{item.memberLastYearSales}}</p>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-purple">
              <p class="title">返佣累计（元）</p>
              <p class="price">{{item.totalMoney}}</p>
              <p class="other">平均返佣比例 {{item.avgPercent}}%</p>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-purple">
              <p class="title">会员总数（个）</p>
              <p class="price">{{item.memberCount}}</p>
              <p class="other">昨日新增 {{item.yesterdayNewMemberCount}}</p>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-purple">
              <p class="title">人均购买（元）</p>
              <p class="price">{{item.avgMemberSales}}</p>
              <p class="other">&nbsp;</p>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div class="grid-content bg-purple-dark">
              <h4>会员区域分布</h4>
              <ul>
                <li v-for="(item,index) in areaList" :key="index">{{item.province}} {{item.percent}}%</li>
              </ul>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <!-- <echarts :option="echartOpion"></echarts> -->
            <div id="myChart" :style="{width: '300px', height: '300px'}"></div>
          </el-col>
          <el-col :span="8">
            <div id="myChart02" :style="{width: '300px', height: '300px'}"></div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <div id="myChart03" :style="{width: '300px', height: '300px'}"></div>
          </el-col>
          <el-col :span="7">
            <div id="myChart04" :style="{width: '300px', height: '300px'}"></div>
          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="会员管理" name="second">
        <el-table style="width: 100%" :data="list">
          <el-table-column label="会员名称" align="center">
            <template slot-scope="scope">{{scope.row.nickname}}</template>
          </el-table-column>
          <el-table-column label="手机" align="center">
            <template slot-scope="scope">{{scope.row.phone}}</template>
          </el-table-column>
          <el-table-column label="城市" align="center">
            <template slot-scope="scope">{{scope.row.city}}</template>
          </el-table-column>
          <el-table-column label="会员数量" align="center">
            <template slot-scope="scope">{{scope.row.count}}</template>
          </el-table-column>
          <el-table-column label="账户余额" align="center">
            <template slot-scope="scope">{{scope.row.balance}}</template>
          </el-table-column>
          <el-table-column label="积分余额" align="center">
            <template slot-scope="scope">{{scope.row.points}}</template>
          </el-table-column>
          <el-table-column label="累积返佣" align="center">
            <template slot-scope="scope">{{scope.row.rebate}}</template>
          </el-table-column>
          <el-table-column prop="address" label="操作">
            <template slot-scope="scope">
              <p>
                <el-button size="mini" @click="handleShowdetails(scope.$index, scope.row)">查看详情</el-button>
              </p>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination-container">
          <el-pagination background="" @size-change="handleSizeChange" @current-change="handleCurrentChange" layout="total, sizes,prev, pager, next,jumper" :page-size="listQuery.pageSize" :page-sizes="[5,10,15]" :current-page.sync="listQuery.pageNum" :total="total"></el-pagination>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import echarts from "echarts";
import { fetchList, salesCountList } from "@/api/member";
const defaultListQuery = {
  pageNum: 1,
  pageSize: 10,
  merchantId: 1,
  sortType: 0
};
export default {
  components: { echarts },
  data() {
    return {
      activeName: "first",
      list: null,
      total: null,
      registerTime: [],
      memberSalese: null,
      yearNewMember: null,
      areaList: null,
      yearNewMember: null,
      allYearNewMember: null,
      yearMonth: null,
      allNewcnt: [],
      allNewTime: [],
      yearTime: [],
      yearcnt: [],
      allYearTime: [],
      allYearcnt: [],
      allYearMonthList: null,
      yearNewTime: [],
      yearNewcnt: [],
      salesCountLists: null,
      listQuery: Object.assign({}, defaultListQuery)
      // 传给子组件的值，这里以柱状图的参数为例，可以参考官网 http://www.echartsjs.com/examples/
    };
  },

  mounted() {
    this.getList();
    this.getdetail();
    this.drawLine();
    this.history_member();
    this.monthly_sales();
    this.annual_sales();
  },
  methods: {
    // 会员管理列表
    getList() {
      this.listLoading = true;
      fetchList(this.listQuery).then(response => {
        this.listLoading = false;
        this.list = response.data.list;
        this.total = response.data.total;
      });
    },
    getdetail(cb) {
      let params = new URLSearchParams();
      this.merchantId = 1;
      salesCountList(1).then(response => {
        this.salesCountLists = response.data;
        this.areaList = response.data.arealDistributionList;
        this.memberSalese = response.data.memberSalesCountList;
        this.yearNewMember = response.data.yearNewMemberList;
      });
    },
    drawLine() {
      salesCountList(1).then(response => {
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById("myChart"));

        var option = {
          title: { text: "今年新增会员" },
          tooltip: {},
          itemStyle: {
            color: "#ccc" // 线的颜色是透明的
          },
          xAxis: {
            data: []
          },
          yAxis: {},
          series: [
            {
              type: "bar",
              data: ""
            }
          ]
        };

     
        console.log(this.yearNewTime, this.yearNewcnt, "eeeeeeeeee");

        option.xAxis.data = this.yearNewTime;
        option.series[0].data = this.yearNewcnt;
        // 绘制图表
        myChart.setOption(option);
      });
    },
    history_member() {
      // 基于准备好的dom，初始化echarts实例
      salesCountList(1).then(response => {
        // 基于准备好的dom，初始化echarts实例
        let myChart02 = this.$echarts.init(
          document.getElementById("myChart02")
        );

        var option = {
          title: { text: "历年会员数量统计" },
          tooltip: {},
          itemStyle: {
            color: "#ccc" // 线的颜色是透明的
          },
          xAxis: {
            data: []
          },
          yAxis: {},
          series: [
            {
              type: "bar",
              data: ""
            }
          ]
        };
        this.allYearNewMember = response.data.allYearNewMemberList;
        console.log(response.data.allYearMonthSalesList, 322222222222);
        this.allYearNewMember.map(item => {
          this.allNewTime.push(item.registerTime);
          this.allNewcnt.push(item.cnt);
        });
        console.log(this.allNewTime, this.allNewcnt, "历年会员数量统计");
        option.xAxis.data = this.allNewTime;
        option.series[0].data = this.allNewcnt;
        // 绘制图表
        myChart02.setOption(option);
      });
    },
    monthly_sales() {
      // 基于准备好的dom，初始化echarts实例
      salesCountList(1).then(response => {
        let myChart03 = this.$echarts.init(
          document.getElementById("myChart03")
        );
        var option = {
          title: { text: "今年月度销售额" },
          tooltip: {},
          itemStyle: {
            color: "#ccc" // 线的颜色是透明的
          },
          xAxis: {
            data: []
          },
          yAxis: {},
          series: [
            {
              type: "bar",
              data: ""
            }
          ]
        };
        this.yearMonth = response.data.yearMonthSalesList;
        this.yearMonth.map(item => {
          this.yearTime.push(item.registerTime);
          this.yearcnt.push(item.cnt);
        });

        option.xAxis.data = ["2019-01", "2019-02", "2019-03", "2019-04"];
        option.series[0].data = [1, 2, 3, 5];
        // 绘制图表
        myChart03.setOption(option);
      });
    },

    annual_sales() {
      // 基于准备好的dom，初始化echarts实例
      salesCountList(1).then(response => {
        let myChart04 = this.$echarts.init(
          document.getElementById("myChart04")
        );
        var option = {
          title: { text: "历年销售额" },
          tooltip: {},
          itemStyle: {
            color: "#ccc" // 线的颜色是透明的
          },
          xAxis: {
            data: []
          },
          yAxis: {},
          series: [
            {
              type: "bar",
              data: ""
            }
          ]
        };
        //
        this.allYearMonthList = response.data.allYearMonthSalesList;
        this.allYearMonthList.map(item => {
          this.allYearTime.push(item.paymentTime);
          this.allYearcnt.push(item.payAmount);
        });
        option.xAxis.data = this.allYearTime;
        option.series[0].data = this.allYearcnt;
        // 绘制图表
        myChart04.setOption(option);
      });
    },

    handleClick(tab, event) {
      console.log(tab, event);
    },
    //  查看详情
    handleShowdetails(index, row) {
      this.$router.push({
        path: "/member/detail",
        query: { id: row.id }
      });
    },
    // 分页

    handleSizeChange(val) {
      this.listQuery.pageNum = 1;
      this.listQuery.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listQuery.pageNum = val;
      this.getList();
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handlePublishStatusChange(index, row) {
      let ids = [];
      ids.push(row.id);
      this.updatePublishStatus(row.publishStatus, ids);
    },
    handleNewStatusChange(index, row) {
      let ids = [];
      ids.push(row.id);
      this.updateNewStatus(row.newStatus, ids);
    },
    handleRecommendStatusChange(index, row) {
      let ids = [];
      ids.push(row.id);
      this.updateRecommendStatus(row.recommandStatus, ids);
    },
    handleResetSearch() {
      this.selectProductCateValue = [];
      this.listQuery = Object.assign({}, defaultListQuery);
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.app-container {
  background: #fff;
  min-height: 500px;
  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
    .bg-purple {
      border: 1px solid #ccc;
      padding: 0 10px;
      box-sizing: border-box;
      border-radius: 4px;
      .title {
        font-size: 14px;
      }
      .price {
        font-size: 16px;
        font-weight: 600;
        border-bottom: 1px solid #ccc;
        line-height: 32px;
        box-sizing: border-box;
      }
      .other {
        font-size: 14px;
        color: #7d7c7c;
      }
    }
    .bg-purple-dark {
      border: 1px solid #ccc;
      padding: 0 10px;
      box-sizing: border-box;
      border-radius: 4px;
      h4 {
        font-size: 13px;
      }
      ul {
        overflow: hidden;
        li {
          display: inline-flex;
          margin: 0;
          padding: 0;
          width: 14%;
          text-align: left;
          float: left;
          line-height: 36px;
          color: #666;
        }
        // li:first-child{
        //   color:#000;
        //   font-weight: 500
        // }
      }
    }
  }
}
</style>
